// import Heatmap from 'ol/layer/Heatmap'
import { Heatmap as HeatmapLayer } from 'ol/layer'
// import GeoJSON from 'ol/format/GeoJSON'
import VectorSource from 'ol/source/Vector'
import Feature from 'ol/Feature'
import Point from 'ol/geom/Point'
import { transform, getTransform } from 'ol/proj' // 坐标转换

export default {
  // mixins: [mapStyle], //, mapFlash
  data () {
    return {
      // oMap: null, // 地图对象
      // sSRS: 'EPSG:4326', // 空间参照系（Spatial Reference System)
      // heatmapLayer: null, // 热力层，所有操作在此组件中完成，故放此处
      // sType: null, // 热力层的类型
      // nMax: 2000, // {Number}热力值最大取值范围
      // aGradient: ["＃00f", "＃0ff", "＃0f0", "＃ff0", "＃f00"], // 默认热力图的颜色阈值
      // attach: null // 相关热力图关联的文件，如：gridheat关联的网格数据
      // // aStyleList: null
    }
  },
  watch: {
    // watch
  },
  mounted () {
    // mounted
  },
  methods: {
    /**
     * @description 创建heatmap层，将生成的图层保存到heatmapLayer
     * @param null
     * @return {Object} 新创建的热力图层
     */
    creatHeatmap () {
      // 需要一个vector的layer来放置图标
      // this.heatmapLayer = new Heatmap({ // ol.layer.Vector
      return new HeatmapLayer({ // Heatmap ol.layer.Vector
        source: new VectorSource(), // ol.source.Vector()
        radius: 5,
        blur: 10,
        weight: function (feature) {
          feature.get('iVal') / this.nMax
        }
      })
    },

    /**
     * @description 销毁heatmap层；（父中存在-可删除）
     * @param null
     * @return null
     */
    destroyHeatmapLayer () {
      if (this.heatmapLayer) {
        const heatSource = this.heatmapLayer.getSource()
        heatSource.clear()
        // 其他内容是否也要销毁
        this.oMap.removeLayer(this.heatmapLayer)
      }
    },

    /**
     * @description 清空热力数据；（父中存在-可删除）
     * @param  null
     * @return null
     */
    clearHeatData () {
      // 清空POI数据
      if (this.heatmapLayer) {
        const heatSource = this.heatmapLayer.getSource()
        heatSource.clear()
      }

      // 清除气泡及详情信息（需要相应模块支持！）
      // 清空详情信息
      // 删除热力图 和 动画层数据？
    },

    /**
     * @description 设置热力半径
     * @param  nRadius {Number} 热力半径值值
     * @return null
     */
    setHeatRadius (nRadius) {
      // 设置热力半径
      if (this.heatmapLayer) {
        this.heatmapLayer.setRadius(nRadius)
      }
    },

    /**
     * @description 设置热力模糊
     * @param  nBlur {Number} 热力模糊值
     * @return null
     */
    setHeatBlur (nBlur) {
      // 设置热力半径
      if (this.heatmapLayer) {
        this.heatmapLayer.setBlur(nBlur)
      }
    },

    /**
     * @description 设置热力透明度
     * @param  fOpacity {float} 热力透明度值 0--1
     * @return null
     */
    setHeatOpacity (fOpacity) {
      // 设置热力半径
      if (this.heatmapLayer) {
        this.heatmapLayer.setOpacity(fOpacity)
      }
    },

    /**
     * @description 设置热图的颜色渐变
     * @param fGradient {Array}热图的颜色渐变 默认为['＃00f'，'＃0ff'，'＃0f0'，'＃ff0'，'＃f00']
     * @return null
     */
    setHeatOpacity (fOpacity) {
      // 设置热力半径
      if (this.heatmapLayer) {
        this.heatmapLayer.setOpacity(fOpacity)
      }
    },

    /**
     * @description 从给定的geojson数据中获取所有的heatmap数据
     * @param oSource {Object} 给出的geojson资源数据
     * @return null
     */
    readHeatmap (oSource) {
      const sViewProj = this.oMap.getView().getProjection()
      // let bIsConv = false // 是否需要坐标转换，从数据库中获取的数据一般为EPSG:4326
      // if (sourceProj !== 'EPSG:4326') { // 从数据库中获取POI使用'EPSG:4326'；后续可能变更
      //   bIsConvert = true
      // }

      let hotNode
      let hotCoord
      const featureArr = [] // 热点信息数组（保存生成的每个热点feature）
      // 读取解析每个Feature对象
      for (let i = 0; i < oSource.features.length; i++) {
        // 获取一个热力值
        hotNode = oSource.features[i]
        hotCoord = hotNode.geometry.coordinates // 获得顶点信息
        console.log(hotNode)
        if (sViewProj.getCode() !== this.sSRS) {
          hotCoord = transform(hotCoord, this.sSRS, sViewProj)
        }
        // 生成Poitn的Feature
        const hotFeature = new Feature({ // ol.Feature
          geometry: new Point(hotCoord), // ol.geom.Point
          type: 'h0t' // add for select
        })
        hotFeature.setId(hotNode.properties.id)
        hotFeature.set('iVal', hotNode.properties.hotVal)
        console.log(hotFeature)
        featureArr.push(hotFeature)
      }
      this.heatmapLayer.getSource().addFeatures(featureArr)
    },

    /**
     * @description 显示热力数据数据 heat
     * @param  oResData {Object}热力图数据对象, nIndex数据索引值（0-23）代表24小时（待定）
     * @return null
     */
    setHeatmapStyle (oStyle) {
      const nRadius = oStyle.radius
      const nBlur = oStyle.blur
      const nOpacity = oStyle.opacity
      const nMinZoom = oStyle.minZ
      const nMaxZoom = oStyle.maxZ
      const aGradient = oStyle.aGradient
      if (nRadius) {
        this.heatmapLayer.setRadius(nRadius)
      }
      if (nBlur) {
        this.heatmapLayer.setBlur(nBlur)
      }
      if (nOpacity) {
        this.heatmapLayer.setOpacity(nOpacity)
      }
      if (nMinZoom) {
        this.heatmapLayer.setMinZoom(nMinZoom)
      }
      if (nMaxZoom) {
        this.heatmapLayer.setMaxZoom(nMaxZoom)
      }
      if (aGradient) {
        this.heatmapLayer.setGradient(aGradient)
        this.aGradient = aGradient
        console.log(this.aGradient)
      }
    },

    /**
     * @description 显示热力数据数据 heat
     * @param  oResData {Object}热力图数据对象, nIndex数据索引值（0-23）代表24小时（待定）
     * @return null
     */
    showHeatmap (oResData, nIndex = 0) {
      if (!oResData || JSON.stringify(oResData) === '{}') {
        return // 没有数据作处理
      }
      // let sourceProj = this.oMap.getView().getProjection()
      const nDataTimeNum = oResData.length
      if (nDataTimeNum === 0) return // 没有数据

      // 设置热力数据上限值
      if (oResData[0].nMax) {
        console.log(oResData[0].nMax)
        this.nMax = oResData[0].nMax
      }
      // 如果热力图有样式数据需要设置
      console.log(oResData)
      if (oResData[0].style) {
        this.setHeatmapStyle(oResData[0].style)
      }

      // 如果只有一条数据，并且时间索引为0，直接生成热力图数据
      if (nIndex === 0 && nDataTimeNum === 1) {
        const oData = oResData[nIndex] // 获取一类数据
        const oGeoJson = oData.geojsonfeatures // 一个数据类型的geojson数据信息
        this.readHeatmap(oGeoJson)
      } else {
        for (let i = 0; i < nDataTimeNum; i++) {
          const oData = oResData[i]
          if (oData.time === nIndex) {
            const oData = oResData[nIndex] // 在数据中查找时间匹配的数据
            const oGeoJson = oData.geojsonfeatures // 一个数据类型的geojson数据信息
            this.readHeatmap(oGeoJson)
            break
          }
        }
      }
      // 检查
      console.log(this.heatmapLayer.getSource().getFeatures())
    }

    // 当前方法
  }
}
